“SinglePro - Multipurpose Bootstrap HTML5/CSS3 One Page Template” Documentation by “WpFreeware Team” v1.0


“SinglePro - Multipurpose Bootstrap HTML5/CSS3 One Page Template”

Created: 10/01/2015
By:WpFreeware Team
Email: contact@wpfreeware.com

Thank you for Downloading our Template. If you have any questions that are beyond the scope of this help file, please feel free to leave suggestion here. Thanks!


Table of Contents

  1. Introduction
  2. HTML Structure
  3. CSS Files and Structure
  4. JavaScripts
  5. Navigation and Logos
  6. Fonts used
  7. FAQs
  8. Sources and Credits

A) Introduction - top

Thank you so much for purchasing this template called singlePro Bootstrap Responsive HTML5/CSS3 One Page Template. Please feel free to contact us if you have question or problem about this template. No guarantees, but we will do our best to provide you with the best possible assistance.

Template Features


B) HTML Structure - top

HTML Files

Only one HTML file "index.html" in this Template.

General HTML structure

This template is a Bootstrap based responsive layout and full Template seperated by Twelve (12) section. Here is the general structure.

		

			
			
			

			
			

C) CSS Files and Structure - top

Styles

		

		
	    
	    
		
		
	    
		
	     
		
	    
		 
	    
		
	     	
		
	    
		
	    
	        	
		

We're using 09 CSS files in this template. we have separated styles for improving convenience to edit this template. If you're going to use this template in production we recommend you merge all stylesheets in one file (for decreasing http queries).

Lets take a look closely at our stylesheet files.

bootstrap.min.css

This Stylesheet contains responsive grid system ,default element style based on bootstrap.It is bootstrap framework main css file

font-awesome.min.css

Base styles for FontAwesome icon fonts.

superslides.css

Styles for Full Screen slider (superslides).

slick.css

Styles for slick slider (slickslider).

animate.css

Styles for smooth animation.

elastic_grid.css

Styles for elastic grid system which used in works portfpolio section.

default-theme.css

This style contains default theme color.

style.css

Common css style and structures for this template.


		/* Style.css File Table of Content
		==================================================
		#BASIC TYPOGRAPHY
		#HEADER
		#ABOUT SECTION
		#SERVICE SECTION
		#Works SECTION
		#TEAM SECTION
		#PRICING SECTION
		#BLOG SECTION
		#TESTIMONIAL SECTION
		#CLIENTS SECTION
		#CONTACT US SECTION
		#FOOTER

		

Some of stylesheets (Totally 9 themes color) contain different theme color for easily changed your desired theme color.You find these theme in css/theme folder.


D) JavaScript - top

This theme imports 13 Javascript files.

			
				
			
						
			
		     
		     
		     
		     
		    
		    
		    
		    
		    
		    		   
		    
		    
		    
		    
		    
		    
		    
		    
		    
		     	
		

Lets take a look closely at our javascript files.

jquery-1.9.1.min.js

jQuery is a multi-browser JavaScript library designed to simplify the client-side scripting of HTML.

jquery.easing.min.js

Easing plugin for creating effects.

maps.googleapis.com/maps/api/js

Google map api for adding google map

jquery.ui.map.js

jquery map ui

wow.min.js

For Smooth animation jQuery file

bootstrap.min.js

Bootstrap framework main jquery file

jquery.superslides.min.js

Superslides plugin jquery file for full screen slider

slick.min.js

Slick plugin jquery file for multiple carousel slider

jquery.circliful.min.js

jQuery CDN file for circle counter

modernizr.custom.js,classie.js,elastic_grid.min.js,portfolio_slider.js

Filterable works portfolio Slider script.

custom.js

We put initialisation of many plugins here.


The navigation bootstrap based menu.It will show different view for desktop and mobile device

The Logo is nested within a tag with class of navbar-brand. As you can see there are two kind of logos: Text based (by default) and Image based. You can choose prefered variant by removing html comments. Don't forget to comment or delete another variant.

Here shown structure layout of Navigation and logos

			
			
			
		

F) Fonts Used - top

We have used three Google Web Fonts in this template.

  1. Open-sans
  2. Varela
  3. Montserrat


G) FAQs - top

How to change Google map location?

  1. Please, open custom.js file from js folder
  2. Find line 361 in code of this file.
    $('#map_canvas').gmap('addMarker', {'position': '57.7973433,12.0502107', 'bounds': true});
  3. You should change '57.7973433,12.0502107' on your own. You can find appropriate value here maps.google.com
  4. More details about google maps customization are here

How to replace work or changed portfolio item with portfolio slider?

  1. Please, open portfolio_slider.js file from js folder
  2. Find line 11 in code of this file.
    { 'title' : 'Gallery 1', 'description' : 'It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters.', 'thumbnail' : ['img/portfolio/small/1.jpg', 'img/portfolio/small/2.jpg', 'img/portfolio/small/3.jpg', 'img/portfolio/small/4.jpg', 'img/portfolio/small/11.jpg'], 'large' : ['img/portfolio/large/1.jpg', 'img/portfolio/large/2.jpg', 'img/portfolio/large/3.jpg', 'img/portfolio/large/4.jpg', 'img/portfolio/large/11.jpg'], 'button_list' : [ { 'title':'Demo', 'url' : 'http://#' }, { 'title':'Download', 'url':'http://#'} ], 'tags' : ['All'] }
  3. You should change 'title','description','thumbnail', 'large','Demo','Download','tags' on your own.

H) Sources and Credits - top


Once again, thank you so much for purchasing this theme. As we said at the beginning, we would be glad to help you if you have any questions relating to this theme. No guarantees, but we'll do my best to assist. If you have a more general question relating to the themes on ThemeForest, you might consider visiting the forums and asking your question in the "Item Discussion" section.

WpFreeware Team

Go To Table of Contents